<!DOCTYPE html>
<html lang="zh-cn" ng-app="bookstoreApp">
<head>
	<title>bookstore</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css">
	<style>
		a,a:hover{text-decoration:none;}
	</style>
</head>

<body class="container" ng-controller="bookListController">
	<header class="page-header">
		<h1><small>{{"Hi" + " " + "BookStore"}}</small></h1>
	</header>

	<div class="row">
		<div class="col-sm-4"></div>
		<div class="col-sm-4">
			<select ng-model="orderByProp" class="form-control">
				<option value="title">title</option>
				<option value="author">author</option>
				<option value="price">price</option>
				<option value="pubdata">pubdata</option>
			</select>
		</div>
		<div class="col-sm-4">
			<input ng-model="query" class="form-control" placeholder="Enter query">
		</div>
	</div>
	<p></p>

	<ul class="list-group">

		<li class="list-group-item" ng-repeat="book in books | filter:query | orderBy:orderByProp">
			<div class="row">
				<div class="col-sm-3">
					<a href="#/{{book.id}}">
						<img src="img/{{book.id}}.png" alt="{{book.id}}" class="img-responsive img-thumbnail"/>
					</a>
				</div>
				<div class="col-sm-9">
					<blockquote>
						<h2>
							<a href="#/{{book.id}}">{{book.title}}</a>
						</h2>
						<footer>{{book.author}}</footer>
					</blockquote>
					<div class="text-right">
						<button class="btn btn-primary">
							<span class="glyphicon glyphicon-shopping-cart"></span>
							{{book.price}}
						</button>
					</div>
				</div>
			</d>
		</li>

	</ul>
</body>

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-route.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-resource.js"></script>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-animate.js"></script>

<script type="text/javascript">
	var bookstoreApp = angular.module("bookstoreApp",[]);

	/*获取所有的book*/
	bookstoreApp.controller("bookListController",function($scope,$http){
		/* 现在改用加载 json 文件的方式   依赖注入  数据与逻辑分离
		$scope.books=[
			{"id":"a","title":"AngularJs","author":"google","price":"120","pubdata":"2009-02-05","status":true,"images":['a','b','c','d']},
			{"id":"b","title":"Bootstrap","author":"twitter","price":"100","pubdata":"2011-10-10","status":false,"images":['a','b','c','d']},
			{"id":"c","title":"C++","author":"ber","price":"150","pubdata":"1983-12-22","status":true,"images":['a','b','c','d']},
			{"id":"d","title":"Django","author":"python","price":"100","pubdata":"2008-09-01","status":true,"images":['a','b','c','d']}
		];*/

		$http.get("db/books.json").success(function(resp){
			$scope.books = resp.data;
		});

		$scope.orderByProp = "title";
	});

	/*获取书的详细信息*/
	bookstoreApp.controller("bookDetailController",function($scope,$http){

	});

</script>

</html>